<template>
  <div class="pagination">
    <span
      class="page"
      v-for="page in pages"
      :key="page"
      :class="{ current: page === current }"
      @click="changePage(page)"
      >{{ page }}</span
    >
  </div>
</template>

<script>
export default {
  name: "Pagination",
  /**
   * props
   * 类似函数的形参
   *
   * 我们组件内部的 pages 通过外部传入的数据动态计算
   * - 总的数据条数
   * - 每页希望显示的数据条数
   * 当我们组件内部的 current 值发生改变的时候，我们要把 current 的值传给父级
   * - 使用 event 来进行通信
   */
  props: {
    //总的数据条数
    total: {
      type: Number,
      default: 0,
    },
    //每页希望显示的数据条数
    size: {
      type: Number,
      default: 5,
    },
    // 定义一个属性，接收传入的函数
    // cb: {
    //   type: Function,
    //   default: function () {},
    // },
  },
  data() {
    return {
      //总页数
      // pages: 5,
      //当前页
      current: 1,
    };
  },
  computed: {
    pages() {
      return Math.ceil(this.total / this.size);
    },
  },
  mounted() {
    console.log(this);
  },
  methods: {
    changePage(page) {
      // 把 current 的值改为当前点击的时候对应的数字，page
      this.current = page;

      // 调用父级传入的函数的时候，把组件内部的数据作为参数传给这个父级的函数
      // this.cb(this.current);

      // Vue把这个子传父的方式通过 事件 来实现了
      // 组件会把传入的attributes 进行一个划分
      // v-bind 方式传入的，存储在组件的 props 中
      // v-on 方式传入的，存储在组件的 $listeners 中
      // this.$listeners.cb(this.current);
      // Vue 不建议我们直接去调用 $listeners 中的函数，而是通过一个方法去间接调用他们: this.$emit()，类似 Vuex
      // 把 this.current 传给父级
      // 第一个参数：事件的名称
      // 第二个参数：传递的数据
      // this.$emit("cb", this.current);
    },
  },
};
</script>

<style scoped>
.pagination {
  display: flex;
}
.pagination .page {
  padding: 10px 20px;
  border: 1px solid #000;
  margin-right: 10px;
  cursor: pointer;
}
.pagination .page:hover,
.pagination .current {
  background-color: #000;
  color: white;
}
</style>